<template>
    <el-form status-icon :model="ruleForm"  :rules="rules" ref="ruleForm" class="ruleForm">
        <!-- <el-form-item  prop="username">
            <el-input  type="text" v-model="ruleForm.username" placeholder="请输入旧密码" size="medium" name="username" prefix-icon="el-icon-location">
              <template slot="prepend">旧密码</template>
            </el-input>
        </el-form-item> -->
        <el-form-item prop="pwd" required>
            <el-input type="password" v-model="ruleForm.pwd" placeholder="请输入新密码" size="medium" name="password" prefix-icon="el-icon-location">
              <template slot="prepend">新密码</template>
            </el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col>
              <el-button type="primary" round plain :loading="loading" @click="submit('ruleForm')">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
            </el-col>
          </el-row>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        pwd: ""
      },
      rules: {
        // username: [
        //   {
        //     required: true,
        //     message: "请输入密码",
        //     trigger: "blur"
        //   }
        // ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      loading: false
    };
  },
  methods: {
    submit(form) {
      let that = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          let locale = {
            huser_id: this.person.huser_id,
            huser_password: this.ruleForm.pwd
          };
          const url = "api/huser/userEditPass.html";
          axios
            .post(url, locale)
            .then(res => {
              if (res.data.code === 1) {
                this.$notify({
                  title: "提示",
                  message: "密码修改成功，请重新登录！",
                  position: "top-left"
                });
                this.$cookie.delete("token");
                sessionStorage.removeItem("loginMsg");
                this.$router.options.isAddDynamicMenuRoutes = false;
                this.$router.push("/login");
              }
            })
            .catch(e => {
              console.log(e);
            });
        }
      });
    }
  },
  computed: {
    ...mapGetters(["person"])
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.ruleForm
  padding 50px
</style>
